"use client";

import TetrisGame from "@/components/tetris/game";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useEffect, useState } from "react";

export default function Home() {
  const [particles, setParticles] = useState<Array<{id: number, size: number, x: number, y: number, color: string, delay: number}>>([]);
  
  // 生成随机粒子
  useEffect(() => {
    const colors = [
      "rgba(0, 240, 240, 0.4)",  // 青色
      "rgba(0, 0, 240, 0.4)",    // 蓝色
      "rgba(240, 160, 0, 0.4)",  // 橙色
      "rgba(240, 240, 0, 0.4)",  // 黄色
      "rgba(0, 240, 0, 0.4)",    // 绿色
      "rgba(160, 0, 240, 0.4)",  // 紫色
      "rgba(240, 0, 0, 0.4)",    // 红色
    ];
    
    const newParticles = Array.from({ length: 20 }, (_, i) => ({
      id: i,
      size: Math.random() * 20 + 5,
      x: Math.random() * 100,
      y: Math.random() * 100,
      color: colors[Math.floor(Math.random() * colors.length)],
      delay: Math.random() * 5,
    }));
    
    setParticles(newParticles);
  }, []);

  return (
    <main className="tetris-bg container mx-auto py-6 px-4 min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
      {/* 粒子背景 */}
      <div className="tetris-particles">
        {particles.map((particle) => (
          <div
            key={particle.id}
            className="tetris-particle"
            style={{
              width: `${particle.size}px`,
              height: `${particle.size}px`,
              left: `${particle.x}%`,
              top: `${particle.y}%`,
              background: particle.color,
              animationDelay: `${particle.delay}s`,
            }}
          />
        ))}
      </div>
      
      <Card className="w-full max-w-4xl bg-card/60 backdrop-blur-md border-primary/30 shadow-lg shadow-purple-500/20 z-10">
        <CardHeader className="text-center">
          <CardTitle className="text-3xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent animate-pulse">
            俄罗斯方块
          </CardTitle>
          <CardDescription className="text-lg text-white/80">
            使用方向键或屏幕按钮控制，享受经典游戏体验
          </CardDescription>
        </CardHeader>
        <CardContent>
          <TetrisGame />
        </CardContent>
      </Card>
    </main>
  );
}